<template>
    <div class="Container">
        <!-- 设备列表 -->
        <div class="devicesList">
        <ul>
            <li v-for="(item,index) in Devices" :key="index" @click="GotoDevice(item)">
            <button>{{item.name}}</button>
            </li>
        </ul>
        </div>

        <!-- 地图组件 -->
        <div class="CanvasContainer">
            <MapCanvas ref="MapCanvas" :Devices="Devices" :MapUrl="MapUrl"/>
        </div>
    </div>
</template>

<script>
import MapCanvas from './MapCanvas'
export default {
  name: 'Index',
  data(){
      return {
          // 绑定到地图控件的数据
          Devices: [
                {'name': '前台摄像头', 'x': 6835, 'y': 3600},
                {'name': '大厅前摄像头', 'x': 14465, 'y': 1695},
                {'name': '大厅后摄像头', 'x': 15455, 'y': 7985},
                // {'name': '前台摄像头', 'x': 1369, 'y': 720},
            ],
          // 底图url
          MapUrl: "hb.png"
      }
  },
  components:{
      MapCanvas
  },
  methods: {
      // 跳转到设备
      GotoDevice(d){
          this.$refs.MapCanvas.GotoDevice(d);
      }
  }
}
</script>

<style scoped>
.Container{
    height: calc(100% - 30px);
    width: 100%;
    margin: 0;
    padding: 0;
}
.CanvasContainer{
    height: calc(100% - 30px);
    width: calc(100% - 200px);
    border:solid 3px hotpink;
    float: left;
    margin: 10px;
}

.devicesList {
    float: left;
    width: 150px;
}

.devicesList ul {
  list-style: none;
}

.devicesList ul li {
  margin-top: 5px;
}
</style>